<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test Task Markup Engineer</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
  <link rel="stylesheet" href="css/libs.min.css">
  <link rel="stylesheet" href="css/style.min.css">
</head>

<body>
<div class=Wrapper>
  <div class="content">
    <header class="header">
      <div class="header__top">
        <div class="container">
          <div class="header__top-inner animate__animated animate__fadeInDown">
            <div class="hamburger menu-btn" id="toggle">
              <div class="hamburger__span one" id="one"></div>
              <div class="hamburger__span two" id="two"></div>
              <div class="hamburger__span three" id="three"></div>
            </div>
            <div class="header__logo">
              <a href="#">
                <img src="images/logo.jpg" alt="logo">
              </a>
            </div>
            <div class="header__menu">
              <ul>
                <li>
                  <a class="header__menu-link" href="#">Home</a>
                </li>
                <li>
                  <a class="header__menu-link" href="#">Explore</a>
                </li>
                <li>
                  <a class="header__menu-link" href="#">My Campaigns</a>
                </li>
                <li>
                  <a class="header__menu-avatar" href="#">
                    <img src="images/avatar.png" alt="avatar">
                  </a>
                </li>
              </ul>
            </div>
            <div class="header__empty"></div>
          </div>
        </div>
      </div>
    </header>

    <section class="donate">
      <div class="container">
        <div class="donate__title animate-left">Improving Education in 2020</div>
        <div class="donate__inner">
          <div class="donate__images">
            <img src="images/donate.jpg" alt="donate">
          </div>
          <div class="donate__description">
            <div class="donate__description--top">
              <div class="donate__description-about">
                <div class="donate__description-about__title title">Tyrone Fairfield</div>
                <div class="donate__description-about__text">
                  2020 Board of Education, Southwest City Schools District, OH
                </div>
              </div>
              <div class="donate__description-electionDay">
                <div class="donate__description-electionDay__title">Election Day:</div>
                <div class="donate__description-electionDay__date">Nov 2nd, 2020</div>
                <div class="donate__description-electionDay__daysToGo">26 days to go</div>
              </div>
            </div>
            <div class="donate__description-price">
              <div class="donate__description-price__title">$25,324.56</div>
              <div class="donate__description-price__from">from 25 donations</div>
              <div class="donate__description-price__line">
                <span style="max-width: 70%;"></span>
              </div>
              <div class="donate__description-price__box">
                <div class="donate__description-price__goal">Goal: $40,000</div>
                <div class="donate__description-price__daysToGo">10 days to go</div>
              </div>
            </div>
            <div class="donate__description-buttons">
              <div class="donate__description-buttons__donate">Donate</div>
              <div class="donate__description-buttons--bottom">
                <div class="donate__description-buttons--left">+ Follow</div>
                <div class="donate__description-buttons--right">Volunteer</div>
              </div>
            </div>
            <div class="donate__description-events">
              <div class="donate__description-events--top">
                <div class="donate__description-events__title title">Upcoming Events</div>
                <a class="donate__description-events__link" href="#">
                  View all
                </a>
              </div>
              <div class="donate__description-events__box">
                <div class="donate__description-events__date">
                  <div class="donate__description-events__day">Mon</div>
                  <div class="donate__description-events__number">24</div>
                </div>
                <div class="donate__description-events__description">
                  <div class="donate__description-events__title">Main Street Meet and Greet</div>
                  <div class="donate__description-events__time">10:00 AM - 11:00 AM</div>
                  <div class="donate__description-events__address">125 Main St., Cherrytown, OH</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="categories">
      <div class="container">
        <div class="categories__inner">
          <div class="categories__tabs">
            <div class="tabs">
              <span class="tab active" data-id="1">About</span>
              <span class="tab" data-id="2">Update</span>
              <span class="tab" data-id="3">Supporters</span>
            </div>
            <div class="tab__content">

              <div class="tab__item active-tab" id="1">
                <div class="categories__box--top">
                  <div class="categories__box--top__title title">Background</div>
                  <div class="categories__box--top__text">
                    In 2016 state representative elections, 42% of all candidates faced no major party opponents.
                    Filing to even run for local office is difficult. For example, in New York State there are over
                    100 pages in the election law guide and an additional 65 page 2018 update guide that pertain to
                    the rules for filing to run for local office. Campaign fundraising compliance is also challenging.
                  </div>
                </div>
                <div class="categories__box-content">
                  <div class="categories__box-content__title title animate-bottom">Platform</div>
                  <div class="categories__box-content--top animate-bottom">
                    <div class="categories__box-content__subtitle">The issues</div>
                    <div class="categories__box-content__items">
                      <a class="categories__box-content__item" href="#">Civil liberties</a>
                      <a class="categories__box-content__item" href="#">Campaign finance</a>
                      <a class="categories__box-content__item" href="#">Criminal justic reform</a>
                      <a class="categories__box-content__item" href="#">Crime</a>
                      <a class="categories__box-content__item" href="#">Drugs</a>
                      <a class="categories__box-content__item" href="#">Economy</a>
                    </div>
                  </div>
                  <div class="categories__box-content--bottom animate-bottom">
                    <div class="categories__box-content__subtitle">organizations i support</div>
                    <div class="categories__box-content__items">
                      <a class="categories__box-content__item" href="#">ACLU</a>
                      <a class="categories__box-content__item" href="#">
                        Action Institute for the Study of Religion and Liberty
                      </a>
                      <a class="categories__box-content__item" href="#">
                        American Foundation for Suicide Prevention
                      </a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="tab__item" id="2">
                <div class="categories__box--top">
                  <div class="categories__box--top__title title">Background</div>
                  <div class="categories__box--top__text">
                    In 2016 state representative elections, 42% of all candidates faced no major party opponents.
                    Filing to even run for local office is difficult. For example, in New York State there are over
                    100 pages in the election law guide and an additional 65 page 2018 update guide that pertain to
                    the rules for filing to run for local office. Campaign fundraising compliance is also challenging.
                  </div>
                </div>
                <div class="categories__box-content">
                  <div class="categories__box-content__title title">Platform</div>
                  <div class="categories__box-content--top">
                    <div class="categories__box-content__subtitle">The issues</div>
                    <div class="categories__box-content__items">
                      <a class="categories__box-content__item" href="#">Civil liberties</a>
                      <a class="categories__box-content__item" href="#">Campaign finance</a>
                      <a class="categories__box-content__item" href="#">Criminal justic reform</a>
                      <a class="categories__box-content__item" href="#">Crime</a>
                      <a class="categories__box-content__item" href="#">Drugs</a>
                      <a class="categories__box-content__item" href="#">Economy</a>
                    </div>
                  </div>
                  <div class="categories__box-content--bottom">
                    <div class="categories__box-content__subtitle">organizations i support</div>
                    <div class="categories__box-content__items">
                      <a class="categories__box-content__item" href="#">ACLU</a>
                      <a class="categories__box-content__item" href="#">
                        Action Institute for the Study of Religion and Liberty
                      </a>
                      <a class="categories__box-content__item" href="#">
                        American Foundation for Suicide Prevention
                      </a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="tab__item" id="3">
                <div class="categories__box--top">
                  <div class="categories__box--top__title title">Background</div>
                  <div class="categories__box--top__text">
                    In 2016 state representative elections, 42% of all candidates faced no major party opponents.
                    Filing to even run for local office is difficult. For example, in New York State there are over
                    100 pages in the election law guide and an additional 65 page 2018 update guide that pertain to
                    the rules for filing to run for local office. Campaign fundraising compliance is also challenging.
                  </div>
                </div>
                <div class="categories__box-content">
                  <div class="categories__box-content__title title">Platform</div>
                  <div class="categories__box-content--top">
                    <div class="categories__box-content__subtitle">The issues</div>
                    <div class="categories__box-content__items">
                      <a class="categories__box-content__item" href="#">Civil liberties</a>
                      <a class="categories__box-content__item" href="#">Campaign finance</a>
                      <a class="categories__box-content__item" href="#">Criminal justic reform</a>
                      <a class="categories__box-content__item" href="#">Crime</a>
                      <a class="categories__box-content__item" href="#">Drugs</a>
                      <a class="categories__box-content__item" href="#">Economy</a>
                    </div>
                  </div>
                  <div class="categories__box-content--bottom">
                    <div class="categories__box-content__subtitle">organizations i support</div>
                    <div class="categories__box-content__items">
                      <a class="categories__box-content__item" href="#">ACLU</a>
                      <a class="categories__box-content__item" href="#">
                        Action Institute for the Study of Religion and Liberty
                      </a>
                      <a class="categories__box-content__item" href="#">
                        American Foundation for Suicide Prevention
                      </a>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>
    </section>

    <!-- start sidebar -->
    <div class="menu">
      <div class="close-menu">
        <ion-icon name="close"></ion-icon>
      </div>

      <div class="nav">
        <ul class="main-menu">
          <li class="main-menu-item sidebar__title">Home</li>
          <li class="main-menu-item sidebar__title">Explore</li>
          <li class="main-menu-item sidebar__title">My Campaigns</li>
          <li class="main-menu-item sidebar__title">Personal Area</li>
        </ul>
      </div>

    </div>
    <!-- end sidebar -->

  </div>

  <footer class="footer">
    <div class="container">
      <div class="footer__inner">
        <div class="footer__inner-date">© 2019</div>
        <div class="footer__inner-menu">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Term & Conditions</a></li>
          </ul>
        </div>
        <div class="footer__inner-social">
          <div class="footer__inner-social__facebook">
            <a href="#">
              <img src="images/facebook.svg" alt="facebook">
            </a>
          </div>
          <div class="footer__inner-social__twitter">
            <a href="#">
              <img src="images/twitter.svg" alt="twitter">
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/ionicons@4.5.5/dist/ionicons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="js/libs.min.js"></script>
<script src="js/main.js"></script>
</body>

</html>
